<template>
  <div class="max-box">
    <div class="header-box">
      <div class="header-left">
        <span>机器人</span>
      </div>
    </div>
    <div class="content-box">
      <div class="tabs">
        <div
          class="tab-one"
          v-for="tab in tabList"
          :class="activeTab == tab.value ? 'active-tab' : ''"
          @click="changeTab(tab.value)"
        >
          <div>{{ tab.label }}</div>
        </div>
      </div>
      <div class="tab-container">
        <component :is="getComponent"></component>
      </div>
    </div>
  </div>
</template>
<script>
import robotHome from "./components/robotHome.vue";
import visualMonitoring from "./components/visualMonitoring.vue";
import alarmManage from "./components/alarmManage.vue";
import robotDeviceVue from "./components/robotDevice.vue";
export default {
  components: { robotHome, visualMonitoring, alarmManage, robotDeviceVue },
  data() {
    return {
      tabList: [
        {
          value: "0",
          label: "首页",
        },
        {
          value: "1",
          label: "图形化监控",
        },
        {
          value: "2",
          label: "告警管理",
        },
        {
          value: "3",
          label: "设备管理",
        },
      ],
      activeTab: 0,
      activeComponent: [
        "robotHome",
        "visualMonitoring",
        "alarmManage",
        "robotDeviceVue",
      ],
    };
  },
  methods: {
    changeTab(index) {
      if (index == this.activeTab) return;
      this.activeTab = index;
    },
  },
  computed: {
    getComponent() {
      return this.activeComponent[this.activeTab];
    },
  },
};
</script>
<style lang="less" scoped>
.max-box {
  width: 100%;
  padding-top: 16px;
  padding-right: 20px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-right: 20px;
    margin-bottom: 16px;
    .header-left {
      span {
        font-size: 18px;
        color: #252b3a;
      }
      i {
        font-size: 20px;
      }
    }
  }
  .content-box {
    background: #fff;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 40px;

    .tabs {
      display: flex;
      padding-left: 16px;
      align-items: center;
      margin-bottom: 12px;
      box-sizing: border-box;
      .tab-one {
        padding: 10px 0 8px 0;
        margin-right: 24px;
        font-size: 12px;
        cursor: pointer;
        color: #515561;
        box-sizing: border-box;
      }
      .open-choose {
        margin-top: 3px;
        cursor: pointer;
        padding-left: 16px;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        &:hover {
          color: #048fff;
        }
        span {
          margin-right: 1px;
        }
        transition: all 1s;
      }
      .active-choose {
        color: #048fff;
        .icon-down {
          transform: rotate(180deg);
        }
      }
      .active-tab {
        color: #048fff;
        border-bottom: 2px solid #048fff;
      }
    }
    .tab-container {
      flex-grow: 1;
      height: 100%;
      padding-bottom: 20px;
      box-sizing: border-box;
      // overflow-y: auto;
    }
  }
}
</style>